'use strict';


const data = [
    { 
      title: "Week 4 Homework: ", 
      description: "This project has a simple quiz game within it.",
      image_path: "images/week_4.png"
    },
    { 
      title: "Week 5 Homework: ", 
      description: "This project has a simple puzzle game within it.",
      image_path: "images/week_5.png"
    },
    { 
        title: "Week 6 Homework: ", 
        description: "This project has a simple puzzle game within it No.2.",
        image_path: "images/week_6.png"
      },
      { 
        title: "Week 7 Homework: ", 
        description: "This project has a lot of neat plug-ins within it.",
        image_path: "images/week_7.png"
      },
      { 
        title: "Week 8 Homework: ", 
        description: "This project has a neat map within it.",
        image_path: "images/week_8.png"
      },
      { 
        title: "Week 9 Homework: ", 
        description: "This project has a neat map within it No.2.",
        image_path: "images/week_9.png"
      },
  ];


  function ProjectList(props) {
    
    return (
      <div>
        <h1>{props.message1}</h1>
        <p>{props.message2}</p>
        <ol>
          {
            
            props.list.map(
              (item,index) => (
                <li key={index}>
                  <strong>{item.title}</strong>
                  <em>{item.description}</em>
                  <br />
                  <img src={item.image_path} alt={item.title} />
                </li>
              )
            )
          }
        </ol>
      </div>
    );
  }
  
  
  const root = ReactDOM.createRoot( document.getElementById('myApp') );
  root.render(
    <ProjectList list={data} message1="Hello!" message2="Welcome To My App!" />
  );