Update text etrange découv + modifs menu.css

CSS/etrange_decouverte.css

@@ -20,6 +20,7 @@ body {
     }
         h1 {
             font-size: 4vw;
+            margin-bottom:0.5vw;
         }
 
         header a {
@@ -45,14 +46,86 @@ body {
 
             #text {
                 font-family: 'Special Elite', cursive;
-                font-size: 2vw;
+                font-size: 1.8vw;
                 text-align: center;
                 color: white;
+                cursor: pointer;
+            }
+
+
+
+
+                .phrase{
+                    opacity:0;
+                    margin:0.1vh 0vw 0.1vh 0vw;
+                    
+                }
+
+                #p1{
+                    animation: fade 2s forwards;
+                }
+
+                #p{
+                    animation: fade 2s forwards;
+                }
+
+                @keyframes fade {
+                    0% {opacity :0}
+                    100% {opacity:1}
+                }
+
+                    #p1{animation-delay:0.5s}
+
+
+
+
+                .mot{
+                    margin:0;
+                }
+
+                #boisson{
+                    color:white;
+                    font-weight: bold;
+                    font-size: 1.8vw;
+                    font-family: 'Special Elite', cursive;
+                    background:black;
+                    border:none;
+                }
+
+                #boisson:focus{
+                    outline:none
+                }
+
+                #boisson option{
+                    background:#494949;
+                    border:none;
+                    font: -moz-pull-down-menu;
+                }
+
+            #arrowBlock{
+                height:2vh;
+                width:50vw;
+                
+            }
+
+                #arrow{
+                    height:2vh;
+                    width:auto;
+                    position:relative;
+                    right:-25vw;
+                    top:-3vh;
+                    animation: bounce 1s forwards;
+                    animation-iteration-count:infinite;
+                }
+
+            @keyframes bounce {
+                50% {top:-6vh}
             }
 
             #buttons {
                 display: flex;
                 justify-content: space-around;
+
             }
 
             .button {
@@ -97,6 +170,8 @@ body {
                 }
             }
 
+            
+
             footer{
                 flex:0.5;
                 display:flex;

CSS/menu.css

@@ -63,6 +63,7 @@ main section {
     #logoBlock{
         margin-bottom:5vh;
         height:20vh;
+        min-height:100px;
         width:50vw; 
         display:block;
         opacity:0;

HTML/etrange_decouverte.html

@@ -18,10 +18,24 @@
     <main id="main">
         <section id="content">
             <article id="text">
-                <p>
+                <p class="phrase" id="p1">Il est 21h30, nous sommes en décembre,</p>
-                    Vous sortez de cours de chinois à 20h30 et vous passez faire un tour au STPI vous prendre un petit café pour réviser toute la nuit.
+                <p class="phrase" >la nuit est tombée depuis longtemps.</p>
-                    Vous apercevez un étudiant qui se dirige vers le sous-sol, vous trouvez ça bizarre.
+                <p class="phrase" >La Lune éclaire la pelouse du R1 alors que vous sortez tout juste de votre réunion du Pôle Huma.</p>
-                </p>
+                <p class="phrase" >Vous ressentez l'envie d'un petit 
+                <p class="phrase" >
+                <select id="boisson">
+                    <option>Café Vanille</option>
+                    <option>Café Noisette</option>
+                    <option>Café Caramel</option>
+                </select> 
+                pour réviser la Thermo.</p>
+                <p class="phrase" >Votre écocup rempli de <span class="mot" id="selectedDrink"></span>,</p> 
+                <p class="phrase" >vous apercevez un étudiant qui se dirige tout droit 
+                <p class="phrase" >vers le sous sol !</p> 
+                <p class="phrase" >Bizarre à cette heure...</p>
+                <div id="arrowBlock">
+                    <img id="arrow" src="../Images/Lecture.png" alt="Texte suivant"/>
+                </div>
             </article>
             <div id="buttons">
                 <button id="safeButton" class="button">Aller dormir, ça fait trop peur</button>

JAVASCRIPT/etrange_decouverte.js

@@ -1,3 +1,33 @@
+// select elements
 let safeButton = document.getElementById("safeButton");
+let boisson = document.getElementById("boisson");
+let selectedDrink = document.getElementById("selectedDrink");
+let text = document.getElementById("text")
 
-console.log(safeButton);
+let counter_p = 1
+let childs = []
+
+console.log(text.childNodes);
+
+selectedDrink.innerText = boisson.value;
+// for (let i=0;i<text.childNodes.length;i++){
+//     if (text.childNodes[i].className == "phrase"){
+//         childs += text.childNodes[i]
+//     }
+// };
+// console.log(childs);
+
+//functions
+function handleSelectChange(event){
+    selectedDrink.innerText = event.target.value;
+}
+
+function handleDisplayText(){
+    
+    text.childNodes[1].setAttribute("id","p");
+    console.log(text.childNodes[1]);
+}
+
+//listeners
+boisson.addEventListener("change",handleSelectChange)
+text.addEventListener("click",handleDisplayText)