Help with converting this HTML file to MM2 module format...

justjim1220

Breaking News



<div>
    <h2><img src="pix/break_news.png" alt="Breaking News" /></h2>
    <div>
        <div>
            <div>
                <ul>
                  <li>
                    <div>
                     <img src="pix/kansas-city-star.png" alt="Kansas City, MO News" />
                    </div>
                      <h3><a href="https://www.kansascity.com/news/" target="myIframe">The Kansas City Star</a></h3>
                  </li>
             <li>
               <div>
                <img src="pix/logos-1.png" alt="Wall St. Journal" />
               </div>
                 <h3><a href="https://www.wsj.com/news/us" target="myIframe">Wall St. Journal</a></h3>
             </li><li>
               <div>
                <img src="pix/washingtonpost.png" alt="Washington Post" />
               </div>
               <h3><a href="https://www.washingtonpost.com/?reload=true" target="myIframe">Washington Post</a></h3>
             </li>
             <li>
               <div>
                <img src="pix/usa_today.png" alt="USA Today" />
               </div>
               <h3><a href="http://rssfeeds.usatoday.com/UsatodaycomNation-TopStories" target="myIframe">USA Today</a></h3>
             </li>
             <li>
               <div>
                <img src="pix/TheIrishNews.jpg" alt="Irish News" />
               </div>
               <h3><a href="http://www.irishnews.com/news/worldnews/" target="myIframe">Irish News</a></h3>
             </li>
             <li>
               <div>
                  <img src="pix/bbc-news.png" alt="BBC World News" />
               </div>
               <h3><a href="https://www.bbc.com/news/world" target="myIframe">BBC World News</a></h3>
             </li>
                </ul>
                 
                 
            </div>
        </div>
    </div>
</div>

justjim1220

@Sean
Here is the CSS file to go with it…

@import url('https://fonts.googleapis.com/css?family=Macondo+Swash+Caps');

.breaking-news{
    width: 100%;
    background-color: rgb(255, 0, 0);
}
.news-title img{
    float:left;
    height:45px;
    line-height:40px;
}
.news-content{
    height:40px;
    padding-top:5px;
    padding-bottom:5px
    box-sizing:border-box;
}
.news-content li{
    margin-left:30px;
    display:inline-block;
    height:40px;
    line-height:40px;
}
.news-item{
    float:left;
}
.news-item img{
    position:relative;
    height:25px;
    line-height:40px;
    margin-right:15px;
    padding-top:5px;
    padding-bottom:5px
}
.ticker-title{
    font-size:20px;
    font-weight:400;
    font-family:"Macondo Swash Caps";
    display:inline-block;
    margin-top:2px;
}

.ticker-title a{
    color:#ffffff;
    text-decoration:none;
}
.ticker-title a:hover{
    color:#0000ff;
}
.tickercontainer,.tickercontainer .mask,ul.news-ticker{
    -webkit-transition:all 0 linear;
    -moz-transition:all 0 linear;
    -o-transition:all 0 linear;
    transition:all 0 linear;
    list-style:none;
}

.tickercontainer{
    overflow:hidden;
}
.tickercontainer .mask{
    position:relative;
    overflow:hidden;
}

.news-ticker{
    position:relative;
    list-style-type:none;
}

ul.news-ticker{
    -webkit-transition:all 0s linear;
    -moz-transition:all 0s linear;
    -o-transition:all 0s linear;
    transition:all 0s linear;
    position:relative;
    list-style-type:none;
}

justjim1220

@Sean

Here are the pics being used…

doubleT

I’d put them in a different structure, perhaps, depending on what you want to achieve.

If it’s just this list that you want: Remove all line breaks and tabs, lead all quotation marks with a backslash (\") and put that complete one line of code in:

targetElement.innerHTML = "your Code here";

More flexible:

var newsSources = [
{
“id”:“washington_post”,
“name”:“Washington Post”,
“alt”:“Washington Post”,
“link”:“https://www.washingtonpost.com/?reload=true”
},
{
“id”:“usa_today”,
“name”:“USA Today”,
“alt”:“USA Today”,
“link”:“http://rssfeeds.usatoday.com/UsatodaycomNation-TopStories”
},
{
“id”:“irish_news”,
“name”:“Irish News”,
“alt”:“Irish News”,
“link”:“http://www.irishnews.com/news/worldnews/”
},
{
“id”:“wall_street_journal”,
“name”:“Wall St. Journal”,
“alt”:“Wall St. Journal”,
“link”:“https://www.wsj.com/news/us”
},
{
“id”:“kansas_city_star”,
“name”:“The Kansas City Star”,
“alt”:“Kansas City, MO News”,
“link”:“https://www.kansascity.com/news/”
},
{
“id”:“bbc_news”,
“name”:“BBC World News”,
“alt”:“BBC World News”,
“link”:“https://www.bbc.com/news/world”
}
];
newMainElement = document.createElement(“div”);
newMainHeadline = document.createElement(“h2”);
newMainHeadline.innerHTML = “< img src=“pix/break_news.png” alt=“Breaking News” />”;
newMainElement.apply(newMainHeadline);
frstWrapper = document.createElement(“div”);
scndWrapper = document.createElement(“div”); // really neccessary?
thrdWrapper = document.createElement(“div”); // really neccessary?
newsList = document.createElement(“ul”);
for (i=0; i< =newsSources.length; i++) {
newsItem = document.createElement(“li”);
newsLogo = document.createElement(“div”);
newsLogo.innerHTML = “< img src=“pix”+newsSources[i].id+”.png" alt=""+newsSources[i].alt+"" />"
newsLink = document.createElement(“h3”);
newsLink.innerHTML = “< a href=”"+newsSources[i].link+"" target=“myIframe”>"+newsSources[i].name+"";
newsItem.apply(newsLogo);
newsItem.apply(newsLink);
newsList.apply(newsItem);
}
thrdWrapper.apply(newsList); // really neccessary? see above
scndWrapper.apply(thrdWrapper); // really neccessary? see above
frstWrapper.apply(scndWrapper);
newMainElement.apply(frstWrapper);

I didn’t use the code block because it can’t handle \".
In < img and < a you have to remove the space.
id = image name, you’ll have to adapt a little, I wrote them in a more uniform style.
alt = could be the same as the name, but I put it in as you varied a little with your alt titles.

Oh, by the way:
Seems like this could also be a good case for a template system.
https://forum.magicmirror.builders/topic/2443/html-templating-system
https://forum.magicmirror.builders/topic/5053/better-way-to-use-html-in-module-development