Unleash Your Creativity , Convert with ease: From Celsius to Fahrenheit, at the tap of a button!.

Welcome, developers! Your challenge is to create a groundbreaking Celsius to Fahrenheit converter app that redefines simplicity and efficiency. Craft an interface that's not only user-friendly but also smart and intuitive, empowering users to effortlessly convert temperatures with precision and ease.

• Must to have
  • Ensure that the < title> tag consist of 'Temperature Converter'
  • Within the 'container', you should have the following elements:
  • An < h1> element that contains the content 'Temperature Converter'.
  • An < input> element with the correct attributes:
  • id set to 'celsius'. - type set to 'number' , placeholder as 'Enter Celsius temperature' and step as 1.
  • A < button> element with the content 'Convert'. This button should trigger the 'convertTemperature' function when clicked. Conversion of the tempreture in this function is not neccessary in this problem just make sure the the function can be triggered through the button
  • A < p> element with the class 'result' and an id of 'result'. This element should be initially empty.
  • Set the background color of the webpage to rgb(243, 243, 243).
  • Adjust the background color of the container to rgb(255, 255, 255).
  • Apply a padding of 20px to the container.
  • Set the border radius of the container to 10px.
  • Change the color of < h1> elements to rgb(52, 152, 219).
  • Ensure that < input> elements span the entire width of their container.
  • Apply a padding of 8px to < input> elements.
  • Add a bottom margin of 10px to < input> elements.
  • Set the background color of < button> elements to rgb(52, 152, 219).
  • Adjust the text color of < button> elements to rgb(255, 255, 255).
  • Apply a border radius of 5px to < button> elements.
  • Set the cursor to a pointer for < button> elements.
  • On hover, change the background color of < button> elements to red.