4. Help with converting this HTML file to MM2 module format...
MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

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


  • This post is deleted!
    0

  • This post is deleted!
    0

  • @Sean

    Here are the pics being used…

    6_1533647363528_washingtonpost.png 5_1533647363527_usa_today.png 4_1533647363527_TheIrishNews.jpg 3_1533647363526_logos-1.png 2_1533647363526_kansas-city-star.png 1_1533647363526_break_news.png 0_1533647363519_bbc-news.png

    0
  • D
    Module Developer

    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

    0