Tutorial: Calendario e botón en Atom.

Ola de novo! Hoxe veño esniarvos a facer un calendario e un botón que te leve ao empezo de todo da túa páxina html. Primeiro comezo explicándovos como fixen o Calendario.

-Calendario código html:

Os códigos que vos vou poñer a continuación van crear este calendario que vos deixo aquí:

Para crear este calendario, escríbese na túa páxina de html, onde desexas poñer o calendario, este código:

<div class="month">
  <ul>
    <li class="prev">&#10094;</li>
    <li class="next">&#10095;</li>
    <li>
      May<br>
      <span style="font-size:18px">2017</span>
    </li>
  </ul>
</div>

<ul class="weekdays">
  <li>Mo</li>
  <li>Tu</li>
  <li>We</li>
  <li>Th</li>
  <li>Fr</li>
  <li>Sa</li>
  <li>Su</li>
</ul>

<ul class="days">
 <li><span class="active">1</span></li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
 <li><span class="active">17</span></li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
</ul>

Eu, por exemplo puxen o mes de Mayo porque é o mes que cumplo, pero cada un pode poñer o mes que queira onde está escrito, no código anterior, esto:

    <li>
      May<br>
      <span style="font-size:18px">2017</span>
    </li>

Logo fun añadindo coa opción <li> os días do mes. Para marcar un día en concreto, no codigo anterior ves o día 1 e o día 17 cun código, o cal podes usar para calquer día que desexes marcar:

 <li><span class="active">1</span></li>

Despois de ter escrito o teu calendario, agora toca ir ao CSS escribir o código e darlle forma ao teu calendario coa fonte ou color que desexes. O código do CSS é o seguinte:

      ul {list-style-type: none;}
        body {font-family: Verdana, sans-serif;}


        .month {
            padding: 70px 25px;
            width: 96.25%;
            background: #1abc9c;
        }


        .month ul {
            margin: 0;
            padding: 0;
        }

        .month ul li {
            color: white;
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 3px;
        }


        .month .prev {
            float: left;
            padding-top: 10px;
        }


        .month .next {
            float: right;
            padding-top: 10px;
        }


        .weekdays {
            margin: 0;
            padding: 10px 0;
            background-color:#ddd;
        }

        .weekdays li {
            display: inline-block;
            width: 13.6%;
            color: #666;
            text-align: center;
        }


        .days {
            padding: 10px 0;
            background: #eee;
            margin: 0;
        }

        .days li {
            list-style-type: none;
            display: inline-block;
            width: 13.6%;
            text-align: center;
            margin-bottom: 5px;
            font-size:12px;
            color:#777;
        }


        .days li .active {
            padding: 5px;
            background: #1abc9c;
            color: white !important
        }

Con este código tes o calendario que ensinei antes, pero cada un pode telo da cor ou forma que máis lle guste.

Esto sería todo polo calendario, agora explicareivos como fixen o botón.

-Botón código html:

Con este botón que vos ensinarei, facedes que ao clicar nel volva ao empezo da páxina. O botón e este que aparece cada vez que baixades:

Antes de facer o botón tedes que ter unha páxina de script.js onde teñades as funcións de cada un dos elementos que poñades na vosa páxina. Tamén, tedes que recordar en ligar a páxina de script.js a todas as vosas páxinas html onde queirades que se fagan esas funcións.
Entón, unha vez ligadas as páxinas ás que desexas ter este botón, pois nesas páxinas html escribes este código:

<button onclick="topFunction()" id="myBtn" title="Go to top">Arriba</button>

Onde teño escrito "Arriba" podédesllo cambiar por calquera outra cousa.
Logo de ter este código posto nas túas páxinas, tes que ir ao CSS, escribir este código e poñelo ao teu gusto:

    #myBtn {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 30px;
            z-index: 99;
            border: none;
            outline: none;
            background-color: Black;
            color: white;
            cursor: pointer;
            padding: 15px;
            border-radius: 10px;
        }

        #myBtn:hover {
            background-color: #555;
        }


Este código está posto coa forma e cor do meu botón, pero podedes cambiar todo.
E por último, tendes que ir ao script.js e escribir este código:


window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

function topFunction() {
    document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;
  }
Con esto o voso botón xa funcionaria.

ESTO É TODO! Espero que vos servira de gran axuda, un saúdo ;)