SHARE
TWEET

Untitled

a guest Mar 24th, 2019 67 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html lang="pl">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <link rel="stylesheet" href="style.css">
  9.     <title>Document</title>
  10. </head>
  11. <body>
  12. <header class="header">
  13.     <h1 class="header__heading">Nagłówek</h1>
  14. </header>
  15. <div class="container">
  16.     <nav class="nav">
  17.         <ul class="nav__list">
  18.             <li class="nav__item"><a href="#" class="nav__link">LINK1</a></li>
  19.             <li class="nav__item"><a href="#" class="nav__link">LINK2</a></li>
  20.             <li class="nav__item"><a href="#" class="nav__link">LINK3</a></li>
  21.         </ul>
  22.     </nav>
  23.     <main class="content">
  24.         <form class="form">
  25.             <h2 class="form__title">Podaj dane:</h2>
  26.             <div class="form__input-wrapper">
  27.                 <input class="form__input" type="text" id="inputName" placeholder="imie">
  28.                 <input class="form__input" type="text" id="inputSubject" placeholder="przedmiot">
  29.                 <input class="form__input" type="date" id="inputBirthday">
  30.             </div>
  31.         </form>
  32.     </main>
  33.     <aside class="news">
  34.         <p class="news__title">news</p>
  35.         <article class="news__content">
  36.             <p>Cześć <span id="name" class="news__inserted">podaj imię</span></p>
  37.             <p>Dzisiaj jest: <span id="curDate" class="news__inserted"></span></p>
  38.             <p>Godzina: <span id="curTime" class="news__inserted"></span></p>
  39.             <p>Przedmiot <span id="subject" class="news__inserted">podaj przedmiot</span></p>
  40.             <p>Urodziny masz za: <span id="birthday" class="news__inserted">podaj datę urodzin</span></p>
  41.         </article>
  42.     </aside>
  43. </div>
  44. <footer class="footer">
  45.     <p>&copy; STOPKA | 2019</p>
  46. </footer>
  47. <script src="script.js"></script>
  48. </body>
  49. </html>
  50.  
  51. * {
  52.     margin: 0;
  53.     padding: 0;
  54.     box-sizing: border-box;
  55. }
  56.  
  57. body {
  58.     font-family: "Arial";
  59. }
  60.  
  61. .header {
  62.     width: 100%;
  63.     min-height: 150px;
  64.     display: flex;
  65.     justify-content: center;
  66.     align-items: center;
  67.     background: #CCCCCC;
  68.     margin: 0;
  69. }
  70. .header__heading {
  71.     text-transform: uppercase;
  72.     font-size: 26px;
  73.     font-weight: 400;
  74. }
  75. .nav__list {
  76.     display: flex;
  77.     flex-direction: row;
  78.     justify-content: space-between;
  79.     align-items: center;
  80.     list-style: none;
  81.     margin: 20px 0;
  82. }
  83. .nav__item {
  84.     width: 30%;
  85.     height: 50px;
  86.     position: relative;
  87. }
  88.  
  89. .nav__link {
  90.     display: flex;
  91.     align-items: center;
  92.     justify-content: center;
  93.     color: #000;
  94.     width: 100%;
  95.     height: 100%;
  96.     text-decoration: none;
  97.     font-weight: 600;
  98.     background: #CCCCCC;
  99. }
  100.  
  101. .nav__link:hover, .nav__link:visited {
  102.     text-decoration: none;
  103.     color: #000;
  104. }
  105.  
  106. .nav__link:hover {
  107.     background: #b8b8b8;
  108.     transition: background 0.2s;
  109. }
  110.  
  111. .content {
  112.     margin: 20px 0;
  113. }
  114.  
  115. .form {
  116.     border: 1px solid #000;
  117.     padding: 15px;
  118. }
  119.  
  120. .form__title {
  121.     text-transform: uppercase;
  122.     margin:  0 0 15px;
  123. }
  124.  
  125. .form__input-wrapper {
  126.     display: flex;
  127.     flex-direction: column;
  128. }
  129.  
  130. .form__input {
  131.     padding: 5px 10px;
  132.     width: 100%;
  133.     border: 1px solid #000;
  134. }
  135.  
  136. .form__input:not(:last-child) {
  137.     margin-bottom: 10px;
  138. }
  139. .form__input::placeholder {
  140.     color: #000;
  141.     text-transform: uppercase;
  142. }
  143.  
  144. .news {
  145.     display: flex;
  146.     flex-direction: column;
  147.     justify-content: space-between;
  148.     align-items: center;
  149.     padding: 15px;
  150.     background: #CCCCCC;
  151. }
  152.  
  153. .news__title {
  154.     text-transform: uppercase;
  155.     font-weight: 700;
  156.     margin: 10px 0;
  157. }
  158.  
  159. .news__content {
  160.     background: white;
  161.     display: block;
  162.     width: 100%;
  163.     min-height: 200px;
  164.     padding: 15px;
  165.     word-break: break-word;
  166. }
  167.  
  168. .news__inserted {
  169.     font-weight: 600;
  170. }
  171.  
  172. .footer {
  173.     height: 70px;
  174.     width: 100%;
  175.     display: flex;
  176.     justify-content: center;
  177.     align-items: center;
  178.     background: #CCCCCC;
  179.     font-weight: 600;
  180.     margin-top: 25px;
  181. }
  182.  
  183. .container {
  184.     width: 100%;
  185.     padding: 0 15px;
  186.     margin: 0 auto;
  187. }
  188. p {
  189.  
  190. }
  191.  
  192. #id {
  193.  
  194. }
  195.  
  196. @media screen and (min-width: 600px) {
  197.     .header {
  198.         min-height: 300px;
  199.     }
  200.     .header__heading {
  201.         font-size: 40px;
  202.     }
  203.     .nav {
  204.         width: 100%;
  205.     }
  206.     .container {
  207.         max-width: 1160px;
  208.         display: flex;
  209.         flex-wrap: wrap;
  210.         flex-direction: row;
  211.         margin: 15px auto 70px;
  212.     }
  213.     .nav__list {
  214.         flex-direction: column;
  215.         align-items: flex-start;
  216.         margin: 0;
  217.     }
  218.     .nav__item {
  219.         margin: 10px 0;
  220.         width: 100%;
  221.         height: 80px;
  222.     }
  223.     .nav__item:first-child {
  224.         margin-top: 0;
  225.     }
  226.     .nav__item:last-child {
  227.         margin-bottom: 0;
  228.     }
  229.     .nav, .news {
  230.         max-width: 25%;
  231.         flex: 0 0 100%;
  232.     }
  233.     .news {
  234.         display: inline-flex;
  235.         margin-left: auto;
  236.     }
  237.     .content {
  238.         display: inline-flex;
  239.         max-width: 50%;
  240.         flex: 0 0 50%;
  241.         padding: 0 20px;
  242.         margin: 0;
  243.     }
  244.  
  245.     .form__input-wrapper {
  246.         flex-direction: row;
  247.         justify-content: space-between;
  248.         flex-wrap: wrap;
  249.     }
  250.  
  251.     .form__input {
  252.         width: 30%;
  253.         margin: 0;
  254.     }
  255.     .form__input:not(:last-child) {
  256.         margin: 0;
  257.     }
  258.  
  259. }
  260. const inputName = document.getElementById("inputName");
  261. const inputSubject = document.getElementById("inputSubject");
  262. const inputBirthday = document.getElementById("inputBirthday");
  263.  
  264. const name = document.getElementById("name");
  265. const curDate = document.getElementById("curDate");
  266. const curTime = document.getElementById("curTime");
  267. const subject = document.getElementById("subject");
  268. const birthday = document.getElementById("birthday");
  269.  
  270. let today = new Date();
  271. updateTime();
  272.  
  273. inputName.addEventListener("change", function () {
  274.     name.innerHTML = inputName.value;
  275.    
  276.     if(inputName.value === "")
  277.     {name.innerHTML="Podaj imię";
  278.     }
  279. }
  280. )
  281. inputSubject.addEventListener("change", function () {
  282.     subject.innerHTML = inputSubject.value;
  283.    
  284.     if(inputName.value === "")
  285.     {name.innerHTML="Podaj przedmiot";
  286.     }
  287. }
  288. )
  289.  
  290. inputBirthday.addEventListener("change", updateBirthday);
  291.  
  292. function updateBirthday ()
  293. {
  294.     let bday = inputBirthday.valueAsDate;
  295.    
  296.     if(bday=== null)
  297.     {
  298.         birthday.innerHTML= "Podaj date urodzin"
  299.     }
  300.     else if(bday>today)
  301.     {
  302.         birthday.innerHTML = "Nie mogłeś się wtedy urodzić";
  303.     }
  304.    
  305.     else{
  306.         bday.setFullYear(today.getFullYear());
  307.         if(today.getTime()> bday.getTime())
  308.         {
  309.             bday.setFullYear(bday.getFullYear()+1);
  310.         }
  311.             const dayToBirthday = Math.floor((bday.getTime() - today.getTime()) / (1000 * 60 * 60 * 24)) + 1;
  312.             birthday.innerHTML= dayToBirthday;
  313.        
  314.     }
  315.    
  316. }
  317.  
  318. function updateTime()
  319. {   today = new Date();
  320.     curDate.innerHTML = today.getDate()+"."+(today.getMonth()+1)+"."+today.getFullYear();
  321.     curTime.innerHTML = today.getHours()+":"+today.getMinutes()+":"+today.getSeconds();
  322.     setTimeout(updateTime, 1000);
  323. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top