Document

├── figma └── figma.md ├── README.md ├── index.html ├── script.js └── style.css /figma/figma.md: -------------------------------------------------------------------------------- 1 | https://www.figma.com/file/dxxeFbwSVfljawg1x4Dkui/Untitled?node-id=0%3A1 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # open website online 2 | 3 | 4 | 5 | https://ahmed12eq.github.io/Rondom-number-game/ 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 12 |

13 |

I am thinking of a number between 1-100.

14 |

Can you guess it?

15 |
16 | 17 |

No. Of Guesses: 0

18 |

Guessed Numbers are: None

19 |

20 | 21 | try again 22 | 23 | 24 |

25 | 26 | 27 | 28 |

29 | 30 | 31 |

32 | 33 |

34 | 35 | 36 | 41 | 42 | 43 | 44 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | var answer = Math.floor(Math.random()*100) + 1; 2 | var no_of_guesses = 10; 3 | var guessed_nums = []; 4 | var msg1 = document.getElementById("message1"); 5 | var msg2 = document.getElementById("message2"); 6 | var msg3 = document.getElementById("message3"); 7 | 8 | var trys = 0; 9 | 10 | function play() { 11 | var user_guess = document.getElementById("guess").value; 12 | if (user_guess < 1 || user_guess > 100) { 13 | alert(" between 1 and 100 please !! "); 14 | } 15 | else { 16 | guessed_nums.push(user_guess); 17 | no_of_guesses -= 1; 18 | trys += 1; 19 | 20 | if (user_guess < answer && no_of_guesses>=0) { 21 | msg1.textContent = "Your guess is too low."; 22 | msg2.textContent = "No. of guesses: " + no_of_guesses; 23 | msg3.textContent = "Guessed numbers are: " + guessed_nums; 24 | } 25 | else if (user_guess > answer && no_of_guesses>=0) { 26 | msg1.textContent = "Your guess is too high."; 27 | msg2.textContent = "No. of guesses: " + no_of_guesses; 28 | msg3.textContent = "Guessed numbers are: " +guessed_nums; 29 | } 30 | else if (user_guess == answer && no_of_guesses <= 10 ) { 31 | msg1.textContent = "Great You Win!!"; 32 | msg2.textContent = "The number was: " + answer; 33 | msg3.textContent = "You guessed it in " + no_of_guesses + " guesses"; 34 | document.getElementById("my_btn").disabled = true; 35 | } 36 | if(user_guess == answer && no_of_guesses <= 7){ 37 | msg1.textContent = " you win ! goood joob"; 38 | msg2.textContent = "the number was : " + answer; 39 | msg3.textContent = "you guessed it in " + guessed_it + " guesses"; 40 | 41 | 42 | 43 | 44 | } 45 | 46 | if(user_guess == answer ) 47 | { 48 | if( no_of_guesses >= 8){ 49 | msg1.textContent = "wtf you are genuis ! "; 50 | msg2.textContent = "the number was : " + answer; 51 | msg3.textContent = "you guessed it in " + guessed_it + "trys"; 52 | 53 | 54 | } 55 | } 56 | 57 | if (no_of_guesses <= 0) 58 | { 59 | msg1.textContent = (" oowe ! you lost !") 60 | 61 | } 62 | 63 | } 64 | } 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | $('#switch').on('click', () => { 75 | if ($('#switch').prop('checked')) { 76 | $('.wrapper').addClass('dark'); 77 | $('.container').addClass('con'); 78 | 79 | `` 80 | } else { 81 | $('.wrapper').removeClass('dark'); 82 | $('.container').removeClass('con'); 83 | 84 | 85 | } 86 | }) -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | @import url('https://fonts.googleapis.com/css?family=Amatic+SC'); 3 | 4 | *, 5 | *:before, 6 | *:after{ 7 | padding: 0; 8 | margin: 0; 9 | box-sizing: border-box; 10 | } 11 | body{ 12 | height: 100vh; 13 | overflow-y: scroll; 14 | background:#E4EBF5 ; 15 | min-height: 100vh; 16 | max-height: 100vh; 17 | 18 | } 19 | .container{ 20 | position: absolute; 21 | width: 65%; 22 | height: 70%; 23 | min-width: 580px; 24 | transform: translate(-50%,-50%); 25 | top: 50%; 26 | left: 50%; 27 | background-color: #E4EBF5; 28 | padding: 50px 10px; 29 | border-radius: 3rem; 30 | display: grid; 31 | justify-items: center; 32 | font-family: 'Poppins',sans-serif; 33 | box-shadow:.8rem .8rem 1.4rem #c8d0e7, 34 | -.2rem -.2rem 1.8rem #ffffff; 35 | } 36 | h3{ 37 | font-size: 16px; 38 | font-weight: 600; 39 | color: rgb(118, 140, 153); 40 | } 41 | input[type="text"]{ 42 | width: 200px; 43 | font-weight: 900; 44 | color: #e65f12; 45 | padding: 20px 0; 46 | text-align: center; 47 | margin-top: 30px; 48 | border-radius: 10px; 49 | box-shadow:.8rem .8rem 1.4rem #c8d0e7, 50 | -.2rem -.2rem 1.8rem #ffffff; 51 | font-size: 40px; 52 | 53 | } 54 | input{ 55 | border: none; 56 | background-color: #E4EBF5; 57 | 58 | } 59 | input:hover{ 60 | border: none; 61 | 62 | } 63 | .try{ 64 | text-decoration: none; 65 | font-size: larger; 66 | color: #e65f12; 67 | } 68 | 69 | button{ 70 | width: 160px; 71 | padding: 15px 0; 72 | border-radius: 10px; 73 | color: #979696; 74 | border: none; 75 | font-size: 18px; 76 | font-weight: 600; 77 | margin-bottom: 30px; 78 | outline: none; 79 | background-color: #d9ddeb; 80 | color: white; 81 | box-shadow:.8rem .8rem 1.4rem #c8d0e7, 82 | -.2rem -.2rem 1.8rem #ffffff; 83 | 84 | } 85 | 86 | button:hover{ 87 | background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), 88 | linear-gradient(127deg, rgba(255, 0, 0, 0.8), rgba(0,255,0,0) 70.71%), 89 | linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); 90 | color: rgb(61, 61, 61); 91 | transform: 5s; 92 | } 93 | 94 | p{ 95 | font-size: 16px; 96 | font-weight: 600; 97 | color: rgb(118, 140, 153); 98 | } 99 | .copyright{ 100 | position: absolute; 101 | bottom:0; 102 | left: 40%; 103 | padding: 40px; 104 | font-size:23px; 105 | 106 | color: rgb(189, 192, 192); 107 | font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 108 | } 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | .wrapper { 122 | display: flex; 123 | padding-left: 2%; 124 | padding-top: 2%; 125 | transition: 1s all ease; 126 | width: 100%; 127 | height: 100vh; 128 | } 129 | 130 | 131 | #switch { 132 | visibility: hidden; 133 | position: absolute; 134 | } 135 | 136 | .switch-label { 137 | display: flex; 138 | justify-content: center; 139 | align-items: center; 140 | width: 60px; 141 | height: 30px; 142 | border-radius: 50px; 143 | position: relative; 144 | cursor: pointer; 145 | transition: 0.5s all ease; 146 | background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), 147 | linear-gradient(127deg, rgba(255, 0, 0, 0.8), rgba(0,255,0,0) 70.71%), 148 | linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); 149 | 150 | } 151 | 152 | .switch-label .toggle { 153 | width: 25px; 154 | height: 25px; 155 | border-radius: 25px; 156 | background-color: #d9ddeb; 157 | position: absolute; 158 | left: 3px; 159 | transition: .5s all ease; 160 | } 161 | 162 | 163 | #switch:checked ~ .switch-label { 164 | border: none; 165 | background:#E4EBF5; 166 | transition: .5s all ease; 167 | } 168 | 169 | #switch:checked ~ .switch-label .toggle { 170 | width: 27px; 171 | height: 27px; 172 | border-radius: 25px; 173 | transform: scale(0.9) translateX(30px) rotate(0deg); 174 | transition: 2s all ease; 175 | background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), 176 | linear-gradient(127deg, rgba(255, 0, 0, 0.8), rgba(0,255,0,0) 70.71%), 177 | linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); 178 | 179 | 180 | } 181 | 182 | .dark { 183 | 184 | background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); 185 | background-size: 400% 400%; 186 | -webkit-animation: gradient 15s ease infinite; 187 | animation: gradient 15s ease infinite; 188 | 189 | } 190 | 191 | @-webkit-keyframes gradient { 192 | 0% { 193 | background-position: 0% 50%; 194 | } 195 | 50% { 196 | background-position: 100% 50%; 197 | } 198 | 100% { 199 | background-position: 0% 50%; 200 | } 201 | } 202 | 203 | @keyframes gradient { 204 | 0% { 205 | background-position: 0% 50%; 206 | } 207 | 50% { 208 | background-position: 100% 50%; 209 | } 210 | 100% { 211 | background-position: 0% 50%; 212 | } 213 | } 214 | 215 | .con{ 216 | box-shadow: none; 217 | 218 | } 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | --------------------------------------------------------------------------------