Prathamesh Borgharakar Homework 1B Starter 1

Be sure to change the title and author of this fiddle to match the assignment requirements!

by Prathameshsb

HTML

<div id="container">

<div id="drawing"></div>
<div id="overlayText">
The House
</div>

<div id="overlayText3">

</div>
<div id="overlayText2">
26
</div>


</div>

CSS

#container{
    position: relative;
    text-align: center;
}
#overlayText{
  position: absolute;
    top: 17.5%;
    left: 42%;
    transform: translate(-50%, -50%);
    font-family:Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
    font-weight:800;
    background-color:black;
    color:white;
    width:100px;
    height:auto;
    padding-top:2.5%;
    padding-bottom:2.5%;
    text-align:center;
}
#overlayText2{
    position: absolute;
    top: 38%;
    left: 42%;
    transform: translate(-50%, -50%);
    width:20px;
    height:20px;
    background-color:cyan;
    border-radius:50%;
}

#overlayText4{
   position: absolute;
    top: 42%;
    left: 42%;
    transform: translate(-50%, -50%);
    width:4px;
    height:2px;
    background-color:black;
    border-radius:50%;
}

JavaScript

"use strict"
let draw = SVG('drawing')
draw.size(1000,1000);

//entire buildings layout
let rect1 = draw.rect(300,400).x(50).y(50).fill('#f00');
let rect_1 = draw.rect(300,400).x(50).y(50).fill('#f00').stroke('#000').stroke({ width: 5});
let rect_2 = draw.rect(300,400).x(50).y(50).fill('#f00').stroke('#000').stroke({ width: 5});


//Code for windows set 1
let rect2 = draw.rect(30,30).x(60).y(60).fill('#000');
let rect3 = draw.rect(30,30).x(110).y(60).fill('#000');
let rect4 = draw.rect(30,30).x(160).y(60).fill('#000');
let rect5 = draw.rect(30,30).x(210).y(60).fill('#000');
let rect6 = draw.rect(30,30).x(260).y(60).fill('#000');
let rect7 = draw.rect(30,30).x(310).y(60).fill('#000');

//Code for windows set 2
let rect9 = draw.rect(30,30).x(60).y(110).fill('#000');
let rect10 = draw.rect(30,30).x(110).y(110).fill('#000');
let rect11 = draw.rect(30,30).x(160).y(110).fill('#000');
let rect12 = draw.rect(30,30).x(210).y(110).fill('#000');
let rect13 = draw.rect(30,30).x(260).y(110).fill('#000');
let rect14 = draw.rect(30,30).x(310).y(110).fill('#000');

//Code for windows set 3
let rect15 = draw.rect(30,30).x(60).y(160).fill('#000');
let rect16 = draw.rect(30,30).x(110).y(160).fill('#000');
let rect17 = draw.rect(30,30).x(260).y(160).fill('#000');
let rect18 = draw.rect(30,30).x(310).y(160).fill('#000');

//Code for windows set 4
let rect19 = draw.rect(30,30).x(60).y(210).fill('#000');
let rect20 = draw.rect(30,30).x(110).y(210).fill('#000');
let rect21 = draw.rect(30,30).x(160).y(210).fill('#000');
let rect22 = draw.rect(30,30).x(210).y(210).fill('#000');
let rect23 = draw.rect(30,30).x(260).y(210).fill('#000');
let rect24 = draw.rect(30,30).x(310).y(210).fill('#000');

//Code for windows set 4
let rect25 = draw.rect(30,30).x(60).y(260).fill('#000');
let rect26 = draw.rect(30,30).x(110).y(260).fill('#000');
let rect27 = draw.rect(30,30).x(160).y(260).fill('#000');
let rect28 = draw.rect(30,30).x(210).y(260).fill('#000');
let rect29 =...