Guess Number GAME : HTML

-

Python is pretty good language but HTML is pretty web language...
so, in first semester I wrote a python code for guess number game, but, now we will learn how to make a guess number game using HTML...

so below is the code for it, I will try to upload all my codes on github... and will share a link with you.
But for now consider the below mentioned code, in HTML and styling using internal CSS.

Code:

<!DOCTYPE html>
<html>
<head><title></title></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
 body{
  background : url("https://cdn.pixabay.com/photo/2015/01/08/15/54/lines-593191_960_720.jpg");
 }
 h1{
  margin-top: 10px;
  font-family: cursive;
  color: black;
  background: white;
  
 }
 table{
  padding-top: 20px;
  border: 10px solid purple;
  padding-left: 60px;
  padding-bottom: 20px;
 }
 td{
  width: 20%;
  height: 20%;
  

 }
 button{
  width: 100px;
  height: 100px;
  font-size: 40px;
  box-shadow: 2px 3px;
  background: url("https://cdn.pixabay.com/photo/2017/03/25/17/55/color-2174045_960_720.png");
  font-family: cursive;
 }
 span{
  font-size: 20px;
  font-family: cursive;
  /*background: black;*/
  color: white;
 
 }
 

</style>
<script>
 function see1(){
  document.getElementById("1").innerHTML = "R";
  
 }
 function see4(){
  document.getElementById("4").innerHTML = "R";
 }
 function see7(){
  document.getElementById("7").innerHTML = "R";
 }
 
 function see9(){
  document.getElementById("9").innerHTML = "R";
 }
 function see6(){
  document.getElementById("6").innerHTML = "R";
 } 
 function seeNot2(){
  document.getElementById("2").innerHTML = "W";
 }
 function seeNot3(){
  document.getElementById("3").innerHTML = "W";
 }
 function seeNot5(){
  document.getElementById("5").innerHTML = "W";
 }
 function seeNot8(){
  document.getElementById("8").innerHTML = "W";
 }
 function seeNot10(){
  document.getElementById("10").innerHTML = "W";
 }
 
</script>
<body>
 <center>
 <h1>Guess The Number Game...</h1>
 
 <table>
 
  <tr>
   <td><button onclick="see1()" id="1">1&nbsp;</button></td>
   <td><button onclick="seeNot2()" id="2">2&nbsp;</button></td>
   <td><button onclick="seeNot3()" id="3">3&nbsp;</button></td>
  </tr>
  <tr>
   <td><button onclick="see4()" id="4">4&nbsp;</button></td>
   <td><button onclick="seeNot5()" id="5">5&nbsp;</button></td>
   <td><button onclick="see6()" id="6">6&nbsp;</button></td>
  </tr>
  <tr>
   <td><button onclick="see7()" id="7">7&nbsp;</button></td>
   <td><button onclick="seeNot8()" id="8">8&nbsp;</button></td>
   <td><button onclick="see9()" id="9">9&nbsp;</button></td>
  </tr>
  <tr><td></td>
   <td><button onclick="seeNot10()" id="10">10</button></td>
  </tr>
  

 
 </table>
 </center>
 <span>Here R = RIGHT & W = Wrong<br>Press F5 To restart :)&nbsp;</span>
 
</body>
</html>




OUTPUT:
















After clicking the number buttons, the output would be:




















































Comments











Post a Comment



















Popular posts from this blog









1-Machine Learning : Start...






-














Image







   John went to the cafeteria 10 times at 1:00 P.M. on 10 Fridays, each time the cafeteria was closed at that particular time. John decided not to go to cafe at 1:00 P.M. on Friday because the cafe will be closed.    But wait! How did John know that the cafe will  also be closed on next Friday at 1:00 P.M.???   Yes, you are absolutely right.    "John Learned from his Experience that the Task of going to the cafeteria at 1:00 P.M. on Fridays resulted in waste of time, since the cafe was closed on each Friday, so it will Perform the same on the next Friday."   In the above scenario, John learned something so we can call it " John Learning ".   Similarly, if we replace John with some sort of Machine, that can learn from the Experience or from the History about how the tasks were performed in the past given certain situation. Such that the Machine will perform the same if the same task happen again in near future. Then this will be called as Machine Learning.     To mak...








Read more










Pintos : Series : Part3 : Project 1 : Alarm Clock






-














Image







          The PintOS project has  27 test cases  that we need to pass. In the first project we are just going for the five test cases related to alarm clock that are as under:   alarm_multiple  alarm_single  alarm_simultaneous  alarm_negative  alarm_zero    But before jumping into the code, let's first understand the basic structure of PintOS and how it runs. Consider the following diagram:       Here QEMU is an emulator on which pintOS runs. Test cases are the processes that we run on the PintOS (Operating System). So we only need to modify the PintOS code, we are not allowed to make any change to the test cases code as this would be a cheating.   When you open up the PintOS directory, in tests/threads/tests.c  all the test cases are declared. And in the tests/threads/  directory you can observe files with the extension " .ck " and " .c ". So the " test_Name.c " files are the files in which test cases are defined, while " test_Name.ck " file...








Read more










Data Engineering Tools 






-














Image







   Data is a new oil. To channelize this data we need proper pipelines. These pipelines are mostly called ETL or data pipelines.  There are various tools out there to work out these Extract, Transform, and Load (ETL) operations.  Some of the scripting tools are:  - Python - SQL and NoSQL Apache provides a wide range of products that can be used as Data Engineering tools.  Some of the amazing apache DE services comprised of; - Hadoop - Spark - Kafka - Cassandra - Hive In addition, some cool DE tools are: - Tableau - Talend - MapReduce These DE tools provide a way to manage the data pipelines in a more effective, efficient, and better way.  Almost every Data-Oriented company in the corporate sector is highly dependent upon these technologies. They are leveraging many of the above-mentioned mechanisms for promising Data Services and Architecture. That's it for today. Hope you have enjoyed this article. If you want to know more about data or software relat...








Read more










Cloud Computing






-














Image







     You might have heard of the famous proverb:   " Necessity is the mother of invention. "   Let's tokenize this proverb, as a wise-man said:" Tokenization makes things easy to understand."   So first thing is Necessity...   Once upon a time, there was   a large company who wanted to create a website for e-commerce . The website was for 24/7 and large amount of data needed to be managed and maintained . For this the management team of the company decided to launch their website onto the server. Initially the website  got Launched successfully, but one day in the fine morning the CEO woke up from his/her slumber and got the Phone call from the manager. The manager told the CEO that their site was down last night due to heavy traffic on the server. CEO called an emergency meeting, in the meeting, the company decided to buy more servers  as their data as well as the users were increasing . So in order to deal with  the large amount of data and heavy traffic , the...








Read more










An Interview with Pakistani Data Scientist : Dr. Zeeshan Ul Hassan Usmani






-














Image







        Dr. Zeeshan-ul-Hassan Usmani, the name known for Data Science, Predictify me, Eisenhower fellowship  and most importantly motivation for many of the students.   He is the Author of book like  (C++) ++سی/سی ,  Bit Coin Block Chain aur Crypto Currency بٹ کوائن، بلاک چین اور کرپٹو کرنسی  and many other, you can visit them here .   Today "Data Science Tales - A Tech blog by Bia Chaudhry," asked him some of the questions, as an interview and we are very glad that he gave his precious time to answer them.   It was kinda "Remote Interview"... not the traditional one..         The Interview  Question:  How can you describe " Dr. Zeeshan ul Hassan Usmani " ?  ANSWER:  I am a shameless idealist. We are all idealists at some stage of our lives but then it fades away and we live as a mediocre. I don’t want it to fade away. I remind myself almost every day that I need to make my today better than my yesterday, and the challenge is keep getting harder J . We onl...








Read more










How to take notes in Freshman Year ?






-














Image







     Yes, you have to take notes in the university class!    Before talking about the notetaking strategy, we will understand the importance of taking notes.   Importance Of Taking Notes   No doubt there are a few students who can produce good results without even taking notes in the class. But their number is least. Most of us need to make good notes in the class especially when we are in university. Notes are important because:    They help us to keep track of what we have studied in the whole semester.  Notes help us to prepare for the exams, in a very short time.  We can refer to our notes for short quizzes in the eleventh hour.  In addition to reading and listening, writing notes increases the ability to memorize the important concepts.  It helps you to realize that you have done something in the class.    Now that we have understood Why to take notes? Let's dig into the notetaking strategy    Notes taking Strategies       One of my friends Ramlah Aamir Aziz  used to take...








Read more










UI / UX Designs 






-














Image







     Is there any website or an application that you enjoyed to use ? If I ask you why you like this particular application then most of you would say that it is fluent, it's easy to use or the theme is so soothing.      So what is behind all these user friendly themes and designs ? The answer is, UI and UX designs. UI stands for User Interface while UX is used for User Experience. In today's world it is important to provide user friendly interface. Your application must be liked by everyone to the extent that they don't want to close that tab.      Now lets dig deep into UI and UX designs....   UI vs UX designs..   The first thing is that UI designs focus on the interface or the front end, the application is providing to the user. It has to deal with beauty. How beautiful, attractive and good-looking is your application; determines its User Interface.     While UX design deals with the experience of the user. Whether the user feels comfortable while using your application ...








Read more










NoSQL database






-














Image







   Data is everywhere, it is expanding with each passing day. Relational Database systems are kind of fixed and static. When we have something in abundance and without any standard formation, then the tables of relational database systems cry out.  So what to do with so many data integrations from several structured as well as unstructured sources. Well, the answer is to go for NoSQL (Not Only SQL). SQL is a structured query language that is used to query Relational Databases. However, NoSQL database does not contain data in the form of relations. Most of the NoSQL databases follow the JSON type structure to store data.    Formal Definition:      Guru99  provides a pretty nice definition for NoSQL databases: " NoSQL Database  is a non-relational Data Management System, that does not require a fixed schema. It avoids joins and is easy to scale. The major purpose of using a NoSQL database is for distributed data stores with humongous data stora...








Read more










A Survey of the Final Year University Students






-














Image







    I don't know what should be the title of this blog post, but let's call it " A survey of the final year university students ". Pretty long title, huh?      Okay, let me tell you about this survey...    The story behind this thing:    Well, one day I thought about writing a post on Facebook to ask people about their sentiments and reviews regarding the final year of university life, then another thought knocked my head to write a full blog post on this topic. Then I disseminated a google form for this purpose. The google form was saying:    "Hello, final semester people!   I thought to collect reviews of 2020 graduates specifically of NUST and other IT universities. I am planning to add these to my blog post. Please take a few seconds to fill this form, thank you."    So that was a brief story behind this whole thing,   Now let's have a look at the most awaited questions and the corresponding responses...      Question#1:  Do you feel like a better hu...








Read more










Machine Learning Tutorial Outline






-














Image







     Machine Learning is not a difficult course but it is a bit different. And different things require different strategies to be conquered.    That is why we will devise some strategy to learn machine learning as a whole without getting bored...   so without further ado, lets have a brief overview of what we are going to cover in this Course;              Lecture   Topics         1.                  Introduction to Machine Learning         2.                  Basic categories of Machine Learning         3.                  Supervised Learning :         4.                  Linear Regression part1 (Uni-variant)         5.                 ...








Read more