First Draft - JSFiddle

by Rania Krourou

HTML

<h1> About Me</h1>
<p> My name is Rania Krourou. I am a Moroccan/American homeschooled student, that has a passion for coding. My hobby is playing soccer, and reading mystery/fantasy books. My position as a soccer player is a sweeper. Out of all the books I have read, my favorite book is "The Most Dangerous Game". This book is about (an insane hunter that arranges for a ship to be wrecked on an island where he can indulge in some sort of hunting and killing of the passengers).    </p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr id="my_identity">
    <td>Rania</td>
    <td>Krourou</td>
    <td>13</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

<!--
<table>
  <tr>
    <td>
      <h2>" The Most Dangerous Game"</h2>
      <img src="http://covers.feedbooks.net/book/3638.jpg?size=large&t=149131204">
    </td>
    <td>  
      <h2>" Couscous"</h2>
      <img src="https://www.errenskitchen.com/wp-content/uploads/2016/09/peppadew-Moroccan-Spiced-Couscous4.jpg">
    </td>
  </tr>
</table>
<p id="el" onclick="f1(this,'green')">Click The Pic! </p>
<img id="e2" onclick="f2(this)" src="https://www.errenskitchen.com/wp-content/uploads/2016/09/peppadew-Moroccan-Spiced-Couscous4.jpg" alt='dish'>//-->

<img src="//www.errenskitchen.com/wp-content/uploads/2016/09/peppadew-Moroccan-Spiced-Couscous4.jpg" onclick=turn_ing() id="my-image">

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

CSS

body {
  background-color: pink;
  font-family: "Comic Sans MS", cursive, sans-serif
}

h1 {
  background-color: lightblue;
}

h1 {
  font-size: 40px;
  border-style: solid;
  border-width: 8px;
}


/*
*/

#my_identity {
  background-color: ;
}

img {
  border-radius: 50%;
}

img {
  height: 400px;
  width: 500px;
  background-color: powderblue;
}

table {
    border-collapse: collapse;
}

table, th, td {
    border: 2px solid black;
}

JavaScript

function f1(elmnt, clr) {
  elmt.style.color = clr;
}

function f2(elmnt) {
  document.getElementById("e2").src = "http://covers.feedbooks.net/book/3638.jpg?size=large&t=149131204";

}

function turn_ing() {
	grab_my_image_src = document.getElementById("my-image").src
  
  if (grab_my_image_src == "https://www.sarahtours.com/img/trips/Moroccan%20pottery%20culture.jpg") {
  	//window.alert(grab_my_image_src)
    document.getElementById("my-image").src = "//covers.feedbooks.net/book/3638.jpg?size=large&t=149131204";
  } else if (grab_my_image_src == "//covers.feedbooks.net/book/3638.jpg?size=large&t=149131204") {
  	//window.alert(grab_my_image_src)
    document.getElementById("my-image").src = "https://www.errenskitchen.com/wp-content/uploads/2016/09/peppadew-Moroccan-Spiced-Couscous4.jpg";
  } else {
  	//window.alert(grab_my_image_src)
    document.getElementById("my-image").src = "https://www.sarahtours.com/img/trips/Moroccan%20pottery%20culture.jpg";
  }
}
//document.getElementById("my-image").src = "//covers.feedbooks.net/book/3638.jpg?size=large&t=149131204"