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









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 "Mainly: The Software Engineering Blog" 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 only need to co








Read more










Web Technologies e.g. SASS, LESS and Doctrine 






-














Image







   Web technologies, as the name indicates are the technology used over the world wide web. These technologies help the users to communicate with each other. You may have learned in your social sciences subject that Language is the main source of communication. Similarly when computers communicate, they also use certain specific language or languages for this.    As we all know HTML is the hypertext markup language. It is the core of web technologies. Then comes JavaScript, React, Angular, Ruby, CSS and so on.    Everyone likes beauty. CSS adds beauty to your page. But you need to write a lot of code for minute things in the style sheet. So to make the task of web developers convenient, Henry Thorton  with  Natalie Weizenbaum   designed and developed SASS  (Syntactically Awesome Style Sheets) respectively. SASS is the style sheet language written in PHP. It is an extension to CSS and .css file can be converted to .sccs file. SASS is backward compatible meaning, it is compatible with al








Read more










E-Commerce : Platforms






-














Image







    Before digging into E-commerce platforms, let's first understand what an E-commerce  actually is?   E-Commerce...   According to the Tokenization Rule , E-commerce is the combination of "E" and "Commerce".  The word Commerce  means trade or buying and selling of items, goods, services, hardwares and, softwares... etc. And " E " stands for "Electronic", electronic  means something like electricity, like signals, like something in the form of electrons (at lower level).           Image Source    So, the word " E-COMMERCE " means:    " A type of trade, that is done using electronic devices (computer, mobile or ATM machines etc). "       And to achieve electronic commerce, what's the most important thing? think over it!    Yeah that's correct! your own Internet is the most important thing to do E-commerce.      Major areas of E-commerce are:    On-line shopping or retailing  On-line bidding or auction  On-line soft








Read more










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










Linear Algebra : Non-Linear By the Way!






-














Image







    Linear Algebra is one of the most important courses in software engineering. But, sometimes you feel like its not so linear, rather non-linear. So, if your linear algebra is dangling then don't worry because I have something for you.   MIT offers open courses, these courses are taught by the most prominent and amazing Teachers. MIT made a series of videos covering Linear Algebra. Respected Professor Gilbert Strang taught this course. You can find it here .   Now, you certainly need some book regarding this very subject, my honorable Professor gave some notes to my class, these are below: you can download them:           You can also get the following Linear Algebra book:             So enjoy, with the  Solution Manual  too :)  








Read more










Marketing 






-














Image







   I am of the opinion that everyone of us must acquire marketing skill.      Why Should We?   This is because, as the world population is increasing, there is a demand for more. If we have certain talent, skill, or if we are capable of doing some task. Then, we can see there are others, who can do the same task. But, our opinion is that : We are the best in our work. So, how can we tell this to the person who needs our services? We need to devise a marketing policy, so that we and the other person gets benefit from it.     Robert T. Kiyosaki  describes in his book : " Rich Dad Poor Dad " that,  McDonald's  is a brand that sells ham burgers. Their ham burgers might not be the best, but they might believe them to be. Like wisely we can also make burgers, and there is a huge possibility that our burgers are the most delicious ones, but we are unable to sell it like McDonald's. Why? The answer is their marketing policy! ( ya, along with other aspects too )     Moreover, 








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










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 related concepts, let me know in th








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 note








Read more










LINUX Kernel






-














Image







    Back in the 18th century UNIX was developed. UNIX is said to be a mother of all the operating systems. LINUX is also based on UNIX. The best things about LINUX are:    It is open source.  It is totally FREE.  One can modify it for customized usage.  One can create ones own OS (Operating System) on Linux bases.  It is more secure than Windows.  If you have Linux, then you don't need to have any anti-virus.  Linux has many applications, like windows.  It's been improved in many years.  It is the most favorite OS of developers.   and so on...    to be continued....   








Read more