Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="Project Gallery" />
    <meta charset=utf-8 />
    <title>PROJECTS</title>
  </head>
  <body>
    <header>
      <h1>Meliss@'s Projects</h1>
      <h2>My Projects</h2>
      <nav>
        
        <ul>
          <li><a href="http://jsbin.com/vinur">HOME</a></li>
          <li><a href="http://jsbin.com/juweg/">Projects </a>
           
          </li>
            
          <li><a href="http://jsbin.com/deruk/">Blog</a></li>
          
          <li><a href="http://jsbin.com/tiqoh">Tutorial</a></li>
          
        </ul>
        
      </nav>
      </header>
    <div id="grid" class="group">
      <div class="row group smoke">
        <div class="fullwidth column">
          <article>
            <a href="#about me" class="group-link">
              
      
      </br>
        
        <div class="fullwidth column">
          <article>
            <a href="#GUESSING GAME" class="group-link">
              <figure id="GUESSING GAME TEXT">
              <img src="https://scontent-a-iad.xx.fbcdn.net/hphotos-ash3/t1.0-9/10334443_10152118898657898_7802008303626942781_n.jpg" />
              <h3>GUESSING GAME </h3>
              <figcaption><p> The computer can guess the number using the randomNum function already provided in the jsbin. You need to PROMPT a player to guess a number between 1 and 100. Compare the user's number to the computer's number and PROMPT the user IF it is too high telling the user that it is too high and to try a lower number ELSE IF the number is too low tell the user that it is too low and to try a higher number  ELSE CONFIRM  they guessed it and tell them what the number was.</p></figcaption>
              </figure>
            </a>
          </article>
        </div><!-- end GUESSING GAME section -->
    
    </br>
  
        <div class="fullwidth column">
          <article>
            <a href="#CALENDAR GENERATOR" class="group-link">
              <figure id="CALENDAR GENERATOR TEXT">
              <img src="https://scontent-b-iad.xx.fbcdn.net/hphotos-ash3/l/t1.0-9/10269374_10152119425007898_354212412942267926_n.jpg" />
              <h3>CALENDAR GENERATOR</h3>
              <figcaption><p>
​
I created a list of information about each month. After obtaining the names of each month, number of days in the month, and the days of the week, I used this information to create a calendar. 
</p></figcaption>
            </figure>
            </a>
          </article>
      </div> <!--end CALENDAR GENERATOR -->
  
  </br>
      
    <div class="fullwidth column">
          <article>
            <a href="#UFO DATA" class="group-link">
              <figure id="UFO DATA TEXT">
              <img src="https://scontent-a-iad.xx.fbcdn.net/hphotos-ash3/v/t1.0-9/10336835_10152118898892898_1516741863306174275_n.jpg?oh=1b8091f13c2711bb74bed15a955f9352&oe=53D04DD7" />
              <h3>UFO DATA</h3>
              <figcaption><p>There have been UFO sightings in Cookeville!Print out the UFO sightings that happened in Cookeville, and make sure your search is case-insensitive.Create a unique list of all the shapes that were reported.The resulting array should not have any duplicate values.All the items in the array should be lowercase.
</p></figcaption>
            </figure>
            </a>
          </article>
      </div> <!--end UFO data -->
​
</br>
        
      <div class="fullwidth column">
          <article>
            <a href="#MOCK CHAT" class="group-link">
              <figure id="MOCK CHAT TEXT">
              <img src="https://scontent-b-iad.xx.fbcdn.net/hphotos-frc3/t1.0-9/10171756_10152118898722898_3738478765962611711_n.jpg" />
              <h3>MOCK CHAT</h3>
              <figcaption><p>Let's create a fake chat window!
​
We want to create a little app that looks like a text app or chat window, where every few seconds, a new message pops up.
</p></figcaption>
            </figure>
            </a>
          </article>
      </div> <!--end MOCK CHAT -->
      
</br>
​
      <div class="fullwidth column">
          <article>
            <a href="#TIC TAC TOE" class="group-link">
              <figure id="TIC TACK TOE TEXT">
              <img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10171757_10152118898772898_2879012925386499230_n.jpg" />
              <h3>TIC-TAC-TOE</h3>
              <figcaption><p>Let's play tic-tac-toe! Click on a box to make your first move!
</p></figcaption>
            </figure>
            </a>
          </article>
      </div> <!--end TICK TACK TOE CHAT -->
​
</br>
      
      <div class="fullwidth column">
          <article>
            <a href="#OLYMPICS" class="group-link">
              <figure id="OLYMPICS TEXT">
              <img src="https://scontent-a-iad.xx.fbcdn.net/hphotos-prn1/t1.0-9/10294446_10152118898877898_4652553745236032894_n.jpg" />
              <h3>OLYMPICS - PAGE CHANGING CONTENT</h3>
              <figcaption><p>Demonstrate how you can change content on a webpage by using jQuery.</p></figcaption>
            </figure>
            </a>
          </article>
      </div> <!--end OLYMPICS -->
​
</br>
      
      <div class="fullwidth column">
          <article>
            <a href="#CALCULATOR ONE" class="group-link">
              <figure id="CALCULATOR ONE TEXT">
              <img src="https://scontent-b-iad.xx.fbcdn.net/hphotos-prn2/t1.0-9/10320593_10152118898482898_8038784839195959945_n.jpg" />
              <h3>CALCULATOR PART 1</h3>
              <figcaption><p>Let's get this calculator working with jquery and javascript. When you click a button it should show up in the calculation container. When you click the equals button it should calculate any numbers and math operators found in the calculation container and put the total in the answer container.</p></figcaption>
            </figure>
            </a>
          </article>
      </div> <!--end CALCULATOR PART ONE-->
​
</br>
      
      <div class="fullwidth column">
          <article>
            <a href="#CALCULATOR TWO" class="group-link">
              <figure id="CALCULATOR TWO TEXT">
              <img src="https://scontent-a.xx.fbcdn.net/hphotos-prn1/t1.0-9/10294265_10152120497342898_111737455793544066_n.jpg" />
              <h3>CALCULATOR PART 2</h3>
              <figcaption><p>Let's work on local storage and event listening. </p></figcaption>
            </figure>
            </a>
          </article>
      </div> <!--end CALCULATOR TWO -->
​
</br>
        
      <div class="fullwidth column">
          <article>
            <a href="#DOTS GAME" class="group-link">
              <figure id="DOTS GAME TEXT">
              <img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10334448_10152118898587898_2986679594527164736_n.jpg" />
              <h3>DOTS GAME</h3>
              <figcaption><p>1.Click on dots that connect by color, all of the adjacent dots of one color
                </br>
2.Click the button to submit group of dots
              </br>
3.Those dots are cleared from the board.
            </br>
4.You score 1 point per dot cleared and 5 additional points for more than 5 dots per group submitted.
        </br>
5.New randomly colored dots will replace the dots cleared
</p></figcaption>
            </figure>
            </a>
          </article>
      </div> <!--end DOTS GAME-->
​
</br>
      
      <div class="fullwidth column">
          <article>
            <a href="#TTU FLAPPY GAME" class="group-link">
              <figure id="TTU FLAPPY GAME TEXT">
              <img src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/10168097_10152118898782898_6240933739817019857_n.jpg" />
              <h3>TTU FLAPPY GAME</h3>
              <figcaption><p>Select two functions from the TTU Flappy Eagle Game.
​
Document the functionality and purpose for each line in the functions.
</p></figcaption>
            </figure>
            </a>
          </article>
      </div> <!--end TTU FLAPPY GAME-->
      
    
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mredwards42pro
0viewers